<template>
  <div class="main-container role-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-notebook-2" /> 权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" size="mini" class="demo-form-inline table-top-bar">
        <el-form-item>
          <el-input v-model="queryInfo.rolename" placeholder="请输入角色名" clearable @input="searchBtn = false" @clear="search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" :disabled="searchBtn" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button v-auth="'AddRole'" type="primary" @click="addRoleVisible = true">添加角色</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="roles" height="580">
        <el-table-column prop="id" label="角色ID" min-width="70" />
        <el-table-column prop="rolename" label="角色名" min-width="120" />
        <el-table-column prop="nickname" label="昵称" min-width="120" />
        <el-table-column prop="description" label="角色描述" min-width="320" />
        <el-table-column prop="status" label="状态" min-width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 1 || scope.row.status === 0">
              <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="roleStatus(scope.$index, scope.row, 0, '禁用')">正常</el-button>
              <el-button v-if="scope.row.status === 0" size="mini" type="warning" @click="roleStatus(scope.$index, scope.row, 1, '启用')">禁用</el-button>
            </template>
            <el-button v-else size="mini" type="info" @click="roleStatus(scope.$index, scope.row, 1, '恢复')">已删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="160" />
        <el-table-column label="操作" min-width="260" fixed="right">
          <template v-if="scope.row.status === 1 || scope.row.status === 0" slot-scope="scope">
            <el-button v-auth="'AuthRole'" size="mini" icon="el-icon-edit" @click="roleAuth(scope.$index, scope.row)">授权</el-button>
            <el-button v-auth="'EditRole'" size="mini" icon="el-icon-edit" @click="roleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-auth="'DelRole'" size="mini" type="danger" icon="el-icon-delete" @click="roleStatus(scope.$index, scope.row, -1, '删除')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="queryInfo.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.pageRow"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog v-dialogDrag title="添加角色" :visible.sync="addRoleVisible" width="30%" :close-on-click-modal="false">
      <add-role v-if="addRoleVisible" @reset-roles="resetRoles" />
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑角色" :visible.sync="editRoleVisible" width="30%" :close-on-click-modal="false">
      <edit-role v-if="editRoleVisible" :edit-role-info="editRoleInfo" @reset-roles="resetRoles" />
    </el-dialog>
    <el-drawer title="角色授权" :visible.sync="authRoleVisible" direction="rtl" close-on-press-escape>
      <auth-role v-if="authRoleVisible" :edit-role-info="editRoleInfo" @reset-roles="resetRoles" />
    </el-drawer>
  </div>
</template>

<script>
import { getRoles, statusRole } from '@/api/role'
import AddRole from './components/AddRole'
import EditRole from './components/EditRole'
import AuthRole from './components/AuthRole'
export default {
  name: 'Role',
  components: { AddRole, EditRole, AuthRole },
  props: {},
  data () {
    return {
      queryInfo: {
        pageIndex: 1,
        pageRow: 10,
        rolename: ''
      },
      searchBtn: true,
      count: 0,
      roles: [],
      addRoleVisible: false,
      editRoleInfo: {},
      editRoleVisible: false,
      authRoleVisible: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getRoles()
  },
  mounted () {},
  methods: {
    getRoles: async function () {
      const data = {
        pageIndex: this.queryInfo.pageIndex,
        pageRow: this.queryInfo.pageRow,
        rolename: this.queryInfo.rolename
      }
      const res = await getRoles(data)
      if (res.list) {
        this.roles = res.list
        this.count = res.count
      }
    },
    roleEdit: function (index, roleInfo) {
      this.editRoleInfo = roleInfo
      this.editRoleVisible = true
    },
    roleAuth: function (index, roleInfo) {
      console.log(roleInfo)
      this.editRoleInfo = roleInfo
      this.authRoleVisible = true
    },
    roleStatus: async function (index, roleInfo, status, text) {
      const confirm = await this.$confirm(`确定要 ${text} ${roleInfo.rolename} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { return true }).catch(() => { return false })
      if (confirm) {
        const data = {
          id: roleInfo.id,
          status: status
        }
        const res = await statusRole(data)
        if (res) {
          this.$message({ message: `${text}成功`, type: 'success', duration: 1000 })
          this.getRoles()
        }
      }
    },
    search: function () {
      this.searchBtn = true
      this.getRoles()
    },
    resetRoles: function () {
      this.addRoleVisible = false
      this.editRoleVisible = false
      this.authRoleVisible = false
      this.getRoles()
    },
    handleSizeChange(val) {
      this.queryInfo.pageRow = val
      this.getRoles()
    },
    handleCurrentChange(val) {
      this.queryInfo.pageIndex = val
      this.getRoles()
    }
  }
}
</script>

<style scoped lang="scss"></style>
